<template>
  <div class="allmessage">
    <!-- 渲染十条 -->
    <!-- 为v-for渲染添加动画 -->
    <TransitionGroup name="list" tag="ul">
      <div class="comment" v-for="item in comments" :key="item.id">
        <div class="avatar" @click="showUserinfo(item.userid)" :title="item.username">
          <avatar v-if="item.useravatar!==null" size="60" :url="item.useravatar"></avatar>
          <avatar v-else size="60"></avatar>
        </div>
        <div class="prompt">
          <!-- 用户个人信息 -->
          <div class="userinfo" >
            <!-- 用户名 -->
            <div class="username">{{item.username}}</div>
            <div class="myicon" v-if="profile.id===item.userid">我的</div>
            <div class="daytime">{{ day(item.date).format('YYYY-MM-DD hh:mm:ss A') }}</div>
            <!-- 系统自动发布的恭喜言论 的专属印记 -->
            <div class="celebrateItem" v-show="item.systemflag===1">
              <i class="iconfont">&#xe612;</i>
              <i class="iconfont">&#xe612;</i>
              <i class="iconfont">&#xe612;</i>
            </div>
            <!-- 更多按钮 提供 举报 删除评论 等功能 -->
            <div class="more" @click.stop="moreIndex = item.id">
              <i class="iconfont">&#xe607;</i>
            </div>
            <div class="morenav" v-show="item.id===moreIndex">
              <div class="item" @click="deleteComment(item.id)">
              <i class="iconfont">&#xe8b6;</i> 删除
              </div>
              <div class="item" @click="reportComment()">
                <i class="iconfont">&#xe60d;</i> 举报
              </div>
              <div class="item">
                <i class="iconfont">&#xe60f;</i> 分享
              </div>
              <div class="item" @click="shield()">
                <i class="iconfont">&#xe6c5;</i> 屏蔽
              </div>
            </div>
          </div>
          <div class="contentall">
            <!-- 评论内容 -->
            <div v-if="item.systemflag===0" class="content">
              {{ item.content }}
            </div>
            <div v-else class="celebrate" info="彩虹边框">
              <div>{{item.content}}</div>
            </div>
            <!-- 设置点赞 评论 分享-->
            <div class="option">
              <!-- 点赞 -->
              <div class="option-item">
                <i class="iconfont"
                @click="addLike($event,item.id)"
                :class="{hadlikes:item.likes.indexOf(profile.id)!==-1}"
                >&#xe7c8;</i>
                <span>{{item.likes.length}}</span>
              </div>
              <!-- 评论 -->
              <div class="option-item">
                <div v-if="item.commentson.length!==0" class="commentsonNum">
                  {{ item.commentson.length }}
                </div>
                <i class="iconfont"
                @click="openCommentson(item.id)"
                style="font-weight:1000">&#xe6ad;</i>
              </div>
              <!-- 分享 -->
              <div class="option-item">
                <i class="iconfont">&#xe603;</i>
              </div>
            </div>
          </div>
        </div>
        <!-- 为v-if添加动画 -->
        <Transition>
        <!-- 子评论区域 -->
        <div class="commentsonbody"
        v-if="commentsonNum === item.id">
        <!-- 子评论组件 当子评论添加组件时刷新父组件的数据重新渲染-->
        <commentson
        @update-parent-state="refreshData"
        :fatherid="item.id"
        :commentsonlist="item.commentson"
        ></commentson>
        </div>
        </Transition>
    </div>
    </TransitionGroup>
    <!-- 底部选择页码 -->
    <div class="page">
      <div class="next"
      @click="prev()"
      :class="{disable:pageIndex===1}">
        上一页
      </div>
      <div class="ellipsis" v-show="firstPage>=2">...</div>
      <div v-for="i in pageArr"
      :key="i"
      class="page-item"
      @click="checkPage(i)"
      :class="{actitem:pageIndex===i}">
        {{ i }}
      </div>
      <div class="ellipsis" v-show="pageSum-lastPage>=1">...</div>
      <div class="next"
      @click="next()"
      :class="{disable:pageIndex===pageSum}">
        下一页
      </div>
    </div>
    <!-- 删除框展示 -->
    <confirmVue
    :title="title"
    :message="message"
    :show="showConfirmation"
    @confirm="confirmDelete"
    @cancel="canelDelete" />
    <!-- 用户信息 -->
    <userDialog
    :show-modal="showUserModal"
    @close="showUserModal = false"
    :userid="userCardid"
    />
  </div>
</template>
<script>
import store from '@/store'
// 调用需要使用的接口
import { getCommontsum, getAllcomments, addLikes, deleteComment } from '@/api/comments'
// 引入弹出消息提示用户
import popmessage from '@/components/library/message'
// 头像组件
import avatar from '@/components/library/avatar.vue'
// 确认组件
import confirmVue from '@/components/confirm.vue'
// 引入子评论组件
import commentson from './commentson.vue'
// 引入用户卡组件
import userDialog from './userdialog.vue'
export default {
  name: 'allMesg',
  components: {
    avatar,
    confirmVue,
    commentson,
    userDialog
  },
  data () {
    return {
      // 用来存放当前渲染的评论
      comments: [],
      // 记录当前评论页面页数
      pageIndex: 1,
      // 记录评论总页数
      pageSum: 0,
      // 渲染按钮数组
      pageArr: [],
      // 第一页
      firstPage: 0,
      // 最后一页
      lastPage: 0,
      // 控制更多按钮的显示
      moreIndex: 0,
      title: '',
      message: '删除操作不可撤回确定要删除吗',
      showConfirmation: false,
      deleteNum: 0,
      // 获取用户数据 从vuex
      profile: null,
      commentsonNum: 0,
      // 点击头像显示用户基本信息
      // 用户卡片框的显示
      showUserModal: false,
      // 卡片框渲染的用户的id
      userCardid: 0
    }
  },
  methods: {
    // 刷新页面数据
    refreshData () {
      // 获取有几条评论从而渲染出页数
      getCommontsum().then(res => {
      // console.log(res.data)
        const key = Object.keys(res.data)[0]
        // 向上取整求出页数
        this.pageSum = Math.ceil(res.data[key] / 10)
      // console.log(this.pageSum)
      })
      // 获取初始的十条评论
      getAllcomments().then(res => {
        this.comments = res.data
        // console.log(res.data)
        // 将点赞 子评论字段转化为数组其length即是点赞数量————————————————————
        for (let i = 0; i < this.comments.length; i++) {
          this.comments[i].likes = JSON.parse(this.comments[i].likes)
          this.comments[i].commentson = JSON.parse(this.comments[i].commentson)
        }
      // 将点赞字段转化为数组其length即是点赞数量————————————————————
      })
    },
    // 切换页码
    checkPage (num) {
      this.pageIndex = num
      this.$router.push({ query: { page: num } })
      // 根据页码获取评论
      setTimeout(() => {
        getAllcomments(this.$route.query).then(res => {
          this.comments = res.data
          for (let i = 0; i < this.comments.length; i++) {
            this.comments[i].likes = JSON.parse(this.comments[i].likes)
            this.comments[i].commentson = JSON.parse(this.comments[i].commentson)
          }
        })
      }, 200)
      // 返回页面顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    // 上一页
    prev () {
      this.pageIndex--
      this.$router.push({ query: { page: this.pageIndex } })
      // 根据页码获取评论
      setTimeout(() => {
        getAllcomments(this.$route.query).then(res => {
          this.comments = res.data
          for (let i = 0; i < this.comments.length; i++) {
            this.comments[i].likes = JSON.parse(this.comments[i].likes)
            this.comments[i].commentson = JSON.parse(this.comments[i].commentson)
          }
        })
      }, 200)
      // 返回页面顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    next () {
      this.pageIndex++
      this.$router.push({ query: { page: this.pageIndex } })
      // 根据页码获取评论
      setTimeout(() => {
        getAllcomments(this.$route.query).then(res => {
          this.comments = res.data
          for (let i = 0; i < this.comments.length; i++) {
            this.comments[i].likes = JSON.parse(this.comments[i].likes)
            this.comments[i].commentson = JSON.parse(this.comments[i].commentson)
          }
        })
      }, 200)
      // 返回页面顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    // 点赞评论
    addLike (e, id) {
      e.srcElement.style.color = '#3e87e5'
      const i = this.comments.findIndex(x => x.id === id)
      addLikes({ id: this.comments[i].id }).then(res => {
        // console.log(res.data.message)
        if (res.data.status === 0) {
          this.comments[i].likes.push(id)
          popmessage({ type: 'success', str: res.data.message })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 打开删除评论确认框
    deleteComment (id) {
      this.showConfirmation = true
      this.deleteNum = id
      // popmessage({ type: 'warn', str: id })
      // popmessage({ type: 'warn', str: '打开了删除框' })
    },
    // 取消删除评论
    canelDelete () {
      this.showConfirmation = false
      popmessage({ type: 'warn', str: '已取消删除！' })
    },
    // 确认删除评论
    confirmDelete () {
      this.showConfirmation = false
      // popmessage({ type: 'warn', str: this.deleteNum })
      deleteComment({ id: this.deleteNum }).then(res => {
        // console.log(res)
        if (res.data.status === 0) {
          this.refreshData()
          popmessage({ type: 'success', str: '删除评论成功' })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 举报评论
    reportComment () {
      popmessage({ type: 'success', str: '已收到举报，稍后我们将会联系工作人员核实' })
    },
    // 打开子评论框
    openCommentson (id) {
      if (this.commentsonNum === id) {
        this.commentsonNum = 0
      } else {
        this.commentsonNum = id
      }
    },
    // 打开显示用户基本信息的弹框
    showUserinfo (id) {
      this.showUserModal = true
      this.userCardid = id
    }
  },
  watch: {
    pageIndex (newval, oldval) {
      if (newval - 2 > 1) {
        this.firstPage = newval - 2
      } else {
        this.firstPage = 1
      }
      if (newval + 2 <= this.pageSum) {
        this.lastPage = newval + 2
      } else {
        this.lastPage = this.pageSum
      }
      this.pageArr = []
      for (let i = this.firstPage; i <= this.lastPage; i++) {
        // console.log(i)
        this.pageArr.push(i)
      }
    }
  },
  created () {
    // 获取有几条评论从而渲染出页数
    getCommontsum().then(res => {
      // console.log(res.data)
      const key = Object.keys(res.data)[0]
      // 向上取整求出页数
      this.pageSum = Math.ceil(res.data[key] / 10)
      // console.log(this.pageSum)
      this.firstPage = 1
      if (this.pageSum > 5) {
        this.lastPage = 5
      } else {
        this.lastPage = this.pageSum
      }
      for (let i = this.firstPage; i <= this.lastPage; i++) {
        // console.log(i)
        this.pageArr.push(i)
      }
      // console.log(this.pageArr)
    })
    // 获取初始的十条评论
    getAllcomments().then(res => {
      this.comments = res.data
      // console.log(res.data)
      // 将点赞 子评论字段转化为数组其length即是点赞数量————————————————————
      for (let i = 0; i < this.comments.length; i++) {
        this.comments[i].likes = JSON.parse(this.comments[i].likes)
        this.comments[i].commentson = JSON.parse(this.comments[i].commentson)
      }
      // 将点赞字段转化为数组其length即是点赞数量————————————————————
    })
    this.profile = store.state.user.profile
  },
  mounted () {
  // 模拟外部点击
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'dropdownMenu') {
        this.moreIndex = 0
      }
    })
  },
  // 在组件生命周期结束时销毁
  beforeUnmount () {
    window.removeEventListener('click', () => {}, true)
  }

}
</script>
<style scoped lang="less">
.allmessage{
  position: relative;
  width: 140%;
  max-width: 140%;
  height:1850px;
  .comment{
    max-width: 100%;
    display: flex;
    .avatar{
      cursor: pointer;
      margin-top:40px ;
      margin-left:20px ;
      height: 60px;
      width: 60px;
    }
    .prompt {
      padding: 10px;
      display: flex;
      flex-direction: column;
      box-shadow: 3px 1px 1px 1px #666;
      width: 780px;
      height:100px;
      border-radius: 5px;
      background-color: #ffffff;
      position: relative;
      top: 8px;
      margin-left:20px ;
      margin-top:20px ;
      //用户信息
      .userinfo{
        width: 600px;
        font-family: '钉钉进步体';
        display: flex;
        //本人发的评论的标识符
        .myicon{
          margin-right: 20px;
          text-align: center;
          border-radius: 4px;
          color: white;
          background-color: #9b9b9b;
          font-size: 6px;
          height: 16px;
          width:32px;
        }
        .username{
          color: #3e87e5;
          width: 100px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 30px;
          margin-left: 30px;
        }
        .daytime{
          color: rgb(163, 163, 163);
        }

        .celebrateItem{
          position: relative;
          left: 288px;
          .iconfont{
            color:#d53e33;
            line-height: 10px;
            font-size: 30px;
          }
        }
        .more{
          position: absolute;
          right: 0px;
          .iconfont{
            color: rgb(163, 163, 163);
            cursor: pointer;
            line-height: 10px;
          }
        }

        .morenav{
          z-index: 3;
          position: absolute;
          top: 40%;
          right: -36px;
          background: rgb(229, 229, 229);
          width: 100px;
          height: 140px;
          box-shadow: 3px 1px 1px 1px #666;
          .item{
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top:1px solid #e1e0e0;
            &:hover{
              background: rgb(141, 140, 140);
            }
          }
        }
        .morenav::before{
            position: relative;
            bottom: 30px;
            left: 35px;
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            border-color:  transparent transparent rgb(229, 229, 229) ;
        }

      }

      //评论内容主体
      .contentall{
        display: flex;
        flex-direction: row;
        //彩虹边框效果
        div.celebrate div{
          border-radius: 10px;
          --borderWidth: 12px;
          --bRadius: 5px;
          line-height: 10px;
          height: 60px;
          width: 600px;
          position: relative;
          z-index: 0;
          overflow: hidden;
          padding: 2rem;
          z-index: 0;
          border-radius: --bRadius;

          &::after, &::before {
              box-sizing: border-box;
          }

          &::before {
            border-radius: 10px;
              content: '';
              position: absolute;
              left: -50%;
              top: -500%;
              width: 200%;
              height: 2000%;
              z-index: -2;
              background-repeat: no-repeat;
              background-size: 50% 50%, 50% 50%;
              background-position: 0 0, 100% 0, 100% 100%, 0 100%;
              background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
              animation: rotate 4s linear infinite;
              @keyframes rotate {
                  100% {
                      transform: rotate(1turn);
                  }
              }
          }
          &::after {
          content: '';
          position: absolute;
          z-index: -1;
          left: calc(var(--borderWidth) / 2);
          top: calc(var(--borderWidth) / 2);
          width: calc(100% - var(--borderWidth));
          height: calc(100% - var(--borderWidth));
          background: rgb(255, 255, 255);
          border-radius: 5px;
          /*  这一行是为了方便查看原来的样子的 */
          /*animation: opacityChange 3s infinite alternate;*/
        }
          @keyframes opacityChange {
              50% {
                  opacity:1;
              }
              100% {
                  opacity: .5;
              }
          }
      }

        .content{
          border-radius: 10px;
          padding: 10px;
          height: 60px;
          width: 600px;
          background-color: rgb(232, 229, 229);
          //最多显示两行超出隐藏
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        .option{
          display: flex;
          margin-top:30px ;
          line-height: 30px;
          height: 30px;
          width: 150px;
          .option-item{
            text-align: center;
            margin-left:20px ;
            width: 30px;
            //评论数量的角标
            .commentsonNum{
              line-height: 12px;
              font-size: 5px;
              background-color: red;
              color: #fff;
              border-radius: 100%;
              height: 14px;
              width:20px;
              position: absolute;
              right: 64px;
            }
            //为已经点过的赞上色
            .hadlikes{
              color: #377af5;
            }
            //图标样式
            .iconfont{
              cursor: pointer;
            }
            //点赞的统计数组
            span{
              margin-left: 8px;
            }
          }
        }
      }
    }
    .prompt:before{
      width: 0px;
      height: 0px;
      content: "";
      border-top: 30px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 20px solid #ffffff;
      position: absolute;
      top: 10px;
      left: -10px;
    }

    //子评论主体
    .commentsonbody{
      width: 0px;
      min-height: 400px;
      max-width: auto;
      position: relative;
      right:800px;
      top: 140px;
      margin-bottom: 200px;
    }
  }

  .page{
    z-index: 3;
    position: absolute;
    left: 300px;
    bottom: 40px;
    width: auto;
    height: 40px;
    line-height: 30px;
    display: flex;
    .page-item{
    cursor: pointer;
    padding: 8px 15px;
    background-color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    margin-right: 10px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
    &:hover{
      background-color: #555;
      color: #fff;
    }
    }
    .actitem{
      background-color: dodgerblue;
      color: white;
    }
    .next{
      cursor: pointer;
      border-radius: 5px;
      font-family: '钉钉进步体';
      text-align: center;
      font-size: 10px;
      background-color: #ddd;
      width: 50px;
      margin:5px;
      height: 30px;
      &:hover{
        background-color: #555;
        color: #fff;
      }
    }
    .disable{
      pointer-events: none;
      background-color: #b9b9b9;
      color: #565656;
    }
    .ellipsis{
      cursor: default;
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  //评论列表渲染动画
  .list-move, /* 对移动中的元素应用的过渡 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  /* 确保将离开的元素从布局流中删除
    以便能够正确地计算移动的动画。 */
  .list-leave-active {
    position: absolute;
  }

}

/* v-if添加动画 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

</style>
